<!DOCTYPE html>
<html style="height: 90%; width: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<!-- layui -->
	<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
	<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>
</head>
<body style="height: 90%;width: 100%; margin: 0">
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/china.js}"></script>
<div id="container" style="height: 900px;width: 60%;float: top;text-align:center;"></div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
	var dataList = [[${d}]];

	$(function() {
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
			tooltip: {
				triggerOn: "click",
				formatter: function(e, t, n) {
					return .5 == e.value ? e.name + "：垃圾量" : e.seriesName + "<br />" + e.name + "：" + e.value
				}
			},
			visualMap: {
				min: 0,
				max: 1000000,
				left: 26,
				bottom: 40,
				showLabel: !0,
				text: ["高", "低"],
				pieces: [{
					gt: 1000000,
					label: "> 1000000 Kg",
					color: "#7f1100"
				}, {
					gte: 10000,
					lte: 1000000,
					label: "10000 - 1000000 Kg",
					color: "#ff5428"
				}, {
					gte: 1000,
					lt: 10000,
					label: "100 - 10000 Kg",
					color: "#ff8c71"
				}, {
					gt: 0,
					lt: 1000,
					color: "#ffd768"
				}, {
					value: 0,
					color: "#ffffff"
				}],
				show: !0
			},
			geo: {
				map: "china",
				roam: !1,
				scaleLimit: {
					min: 1,
					max: 2
				},
				zoom: 1.23,
				top: 120,
				label: {
					normal: {
						show: !0,
						fontSize: "14",
						color: "rgba(0,0,0,0.7)"
					}
				},
				itemStyle: {
					normal: {
						//shadowBlur: 50,
						//shadowColor: 'rgba(0, 0, 0, 0.2)',
						borderColor: "rgba(0, 0, 0, 0.2)"
					},
					emphasis: {
						areaColor: "#f2d5ad",
						shadowOffsetX: 0,
						shadowOffsetY: 0,
						borderWidth: 0
					}
				}
			},
			series: [{
				name: "全国垃圾投放",
				type: "map",
				geoIndex: 0,
				data: dataList
			}]
		};

		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	});
</script>